<template>
  <div class="login">
    <div class="login_box">
      <h1>登录</h1>
      <n-form
        ref="form"
        size="medium"
        :model="formValue"
        :label-width="80"
        label-placement="left"
        :rules="rules"
      >
        <n-form-item label="用户名" path="username">
          <n-input v-model:value="formValue.username" placeholder="请输入用户名"></n-input>
        </n-form-item>
        <n-form-item label="密码" path="password">
          <n-input v-model:value="formValue.password" placeholder="请输入密码"></n-input>
        </n-form-item>
        <div style="display: flex;justify-content: space-between;align-items: start">
          <n-form-item label="验证码" path="code">
            <n-input v-model:value="formValue.code" placeholder="请输入验证码">
            </n-input>
          </n-form-item>
          <div class="code" v-html="imgURl" @click="getCode"></div>
        </div>
        <n-form-item label-width="0">
          <n-button type="info" :block="true" @click="handleSubmit">登录</n-button>
        </n-form-item>
      </n-form>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "login"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, Ref, ref} from "vue"
import {FormInst, useMessage} from 'naive-ui'
import {ums_code, ums_login} from '@/api/ums'
import {UmsLoginReq} from '@/type/ums'
import {useRouter} from 'vue-router'

const message = useMessage()

const router = useRouter()

const form:Ref<FormInst | null> = ref(null)

const imgURl = ref<string>("")

const formValue = reactive<UmsLoginReq>({
  username: "",
  password: "",
  code: "",
  uuid: ''
})

const rules = {
  username: {
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  },
  code: {
    required: true,
    message: '请输入验证码',
    trigger: 'blur'
  }
}

const getCode = () => {
  ums_code().then(res => {
    imgURl.value = res.data.text
    formValue.uuid = res.data.uuid
  })
}

const handleSubmit = () => {
  form.value?.validate(errors => {
    if (!errors) {
      ums_login(formValue).then(res => {
        console.log(res)
        if (res.code === 200) {
          const token = res.data.token
          sessionStorage.setItem("token", token)
          sessionStorage.setItem("info", JSON.stringify(res.data.user))
          message.success("登录成功")
          router.push("/home")
        }else {
          message.error(res.message)
          getCode()
        }
      })
    }
  })
}


onMounted( () => {
  getCode()
} )
</script>

<style scoped lang="scss">
*{
  user-select: none;
}
.login{
  width: 100vw;
  height: 100vh;
  background: url("@/assets/imgs/login_background.jpg") no-repeat center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  &_box{
    width: 500px;
    //height: 400px;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    background-color: rgba(255,255,255,.2);
    border-radius: 16px;
    text-align: center;
    padding: 20px;
    h1{
      letter-spacing: 10px;
    }
    .code{
      background: #fff;
      cursor: pointer;
    }
  }
}
</style>
